<template>
    <view-box style="background:#f4f4f4">
        <div class="margin-pad-nia">
            <!-- <group style="height:35px">
                <datetime style="height:35px;" class="border-date" v-model="minuteListValue" format="YYYY" :minute-list="['00', '15', '30', '45']" @on-change="change" title="资讯年运"></datetime>
            </group> -->
            <div style="height:10px;"></div>
            <group style="height:35px">
                <x-input style="height:35px" title="姓名" name="username" v-model="addBasic.name" placeholder="请输入姓名" is-type="china-name"></x-input>
            </group>
            <div style="height:10px;clear: both"></div>
            <div class="xb-evali" >
                <p style="margin-left:12px;">性别</p>
                 <label>
                <input type="radio" v-model="addBasic.sex" name="radio" checked value="1">
                <span></span>
                男生
                </label>
                <p>&nbsp;<i slot="icon" style="color:#008AFF" class="icon-baina_nan iconfont"></i></p>
                 <label>
                <input type="radio" v-model="addBasic.sex" name="radio" value="2">
                <span></span>
                    女生
                </label>
                <p>&nbsp;<i slot="icon" style="color:#FF6464;" class="icon-baina_nv iconfont"></i></p>
            </div>
            <div style="height:10px;clear: both"></div>
            <div class="backg-evalua">
                <group>
                    <datetime v-model="addBasic.lunar_calendar" :min-year=1930 :max-year=2090 format="YYYY-MM-DD HH:mm" @on-change="change" title="阴历(生日)"></datetime>
                </group>
                 <div style="height:1px;background:#f4f4f4;"></div>
                 <group>
                    <datetime v-model="addBasic.gregorian_calendar" :min-year=1930 :max-year=2090 format="YYYY-MM-DD HH:mm" @on-change="change" title="阳历(生日)"></datetime>
                </group>
            </div>
            <div style="height:10px;clear: both"></div>
            <div class="">
                <p style="font-size:13px;color:#FF5151;">*阴历阳历可以二填一，也可以全部填，请确保正确，否则会影响评测结果。</p>
            </div>
            <div style="height:10px;clear: both"></div>
            <div class="backg-evalua">
                <group>
                    <x-address title="出生地"  v-model="addressValue" @on-shadow-change="onShadowChange" raw-value :list="addressData" value-text-align="right"></x-address>
                </group>
                <div style="height:1px;background:#f4f4f4;"></div>
                <group>
                    <x-input style="font-size:13px;" name="username"  v-model="addressValuedeiat" placeholder="请填写详细地址~~否则会影响评测结果~~" ></x-input>
                </group>
            </div>
             <div style="height:10px;clear: both"></div>
            <div class="backg-evalua" >
                <group >
                    <x-input title="重点咨询" style="font-size:13px;height:35px;"  v-model="addBasic.zhongdian" name="username" placeholder="非必填选项~~" ></x-input>
                </group>
            </div>
            <div style="height:10px;clear: both"></div>
            <div class="">
                <x-button @click.native="save" class="x-button-evali">提交(¥0.00)</x-button>
            </div>
             <div style="height:10px;clear: both"></div>
            <div class="center-text-evalu">
                <p align="center">*重要说明：</p>
                <p class="text-cl">1.以上信息必须准确填写，否则会造成偏差。</p>
                <p class="text-cl">2.本平台的分析仅作为娱乐参考切勿用于任何重要事项，本平台不承担以此带来的任何责任。</p>
                <p class="text-cl">3.此评测需要3-5天，请耐心等待！</p>
            </div>
        </div>
    </view-box>
</template>
<script>
import { ViewBox, Box, Group, XButton, Datetime, XInput, XAddress, ChinaAddressData } from 'vux'

export default {
  components: {
    ViewBox,
    Box,
    Group,
    XButton,
    Datetime,
    XInput,
    XAddress
  },
  data () {
    return {
      minuteListValue: '',
      valueReadonly: '',
      addressData: ChinaAddressData,
      valueReadonlyc: '',
      addressValue: ['贵州省', '贵阳市', '南明区'],
      readonly: true,
      addressValuedeiat: '',
      addBasic: {
        name: '',
        sex: 0
      },
      addiss: {}
    }
  },
  mounted () {
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    change () {
      console.log(1)
    },
    save () {
      console.log(this.addBasic.sex)
      if (this.addBasic.name === '') {
        this.$vux.toast.show({
          text: '姓名不能为空',
          type: 'text'
        })
        return false
      }
      if (this.addBasic.sex === 0) {
        this.$vux.toast.show({
          text: '选择性别',
          type: 'text'
        })
        return false
      }
      let data = {
        user_id: this.userInfo.id ? this.userInfo.id : 0,
        name: this.addBasic.name,
        sex: this.addBasic.sex,
        birth_address: this.addiss.province + this.addiss.city + this.addiss.area + this.addressValuedeiat,
        lunar_calendar: this.addBasic.lunar_calendar,
        gregorian_calendar: this.addBasic.gregorian_calendar,
        zhongdian: this.addBasic.zhongdian
      }
      this.$http.post('/yiJing', data).then(response => {
        this.$vux.toast.show({
          text: '添加成功',
          type: 'text'
        })
        this.$router.push({ path: '/radarmap' })
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    onShadowChange (ids, names) {
      this.addiss = {
        province: names[0],
        city: names[1],
        area: names[2]
      }
    }
  }
}
</script>

<style scoped>
.margin-pad-nia{
    width: 94%;
    margin-left: 3%;
}
.border-date{
}
.xb-evali{
    width:100%;
    background: #fff;
    height: 50px;
    border-radius: 8px;
    line-height: 50px !important;
    margin-top: 20px;
    display: flex;
    align-items: center;
    color: #bababa;font-size: 14px;
}
.xb-evali input[type="radio"]{display:none;}
.xb-evali input[type="radio"] + span{border:1px solid #CCCCCC;border-radius:20px;width:20px; height:20px; float:left; margin-top:0px;margin-right:10px;margin-left: 10px;}
.xb-evali input[type="radio"]:checked + span{border:1px solid #008AFF;border-radius:20px;background:url(./images/yi.png) no-repeat;background-size: 20px 20px;}
label{display: inline-block;line-height: normal}

.backg-evalua{
    width: 100%;
    background: #fff;
    border-radius: 8px;
}
.center-text-evalu{
    width: 100%;
    font-size: 14px;
    color: #FF5151
}
.center-text-evalu .text-cl{
padding:0px 5%;
}
.x-button-evali{
    background: #32B6C6;
    border: 1px solid #32B6C6;
    color: #fff;
}
</style>
<style>
.weui-cells:after{
    border-bottom: 0px solid #D9D9D9 !important;
}
.vux-no-group-title{
 border-radius: 8px;
}
.weui-cells:before{
    border-top: 0px solid #D9D9D9 !important;
}
.vux-no-group-title {
    margin-top: 0 !important;
}
</style>
